iT邦幫忙

2024 iThome 鐵人賽

DAY 6
0
Python

Django - 製作網頁一點通系列 第 6

Day6 - CSS基礎(二)

  • 分享至 

  • xImage
  •  

這篇也將透過5個實例來說明CSS的標籤與應用。

  • text-align文字對齊方式

將以下程式保存為01.html,使用瀏覽器開啟

  • text-align文字對齊方式
<!DOCTYPE html>
<html>
    <style>
        #title {text-align: center;}
        #text {text-align: justify;}
        #copyright {text-align: left;}
    </style>
    <head>
        <meta charset="utf-8">
        <title>DAY 06</title>
    </head>
    <body>
        <h1 id="title">如果一直熬夜會對人體有什麼影響?</h1>
        <p id="text">有一位偉大的名人說過,如果一直熬夜會導致人們很晚睡,同時也會導致他身體的老化,這就是那位名人說的話</p>
        <p id="copyright">沒有版權</p>
    </body>
</html>

這樣就能夠調整文字的位置了
https://ithelp.ithome.com.tw/upload/images/20240920/201694788UclpJkpwo.png

將以下程式保存為02.html,使用瀏覽器開啟

  • text-indent首行縮排
<!DOCTYPE html>
<html>
    <style>
        #title {text-align: center;}
        #text {text-align: justify; text-indent: 6%;}
        #copyright {text-align: left;}
    </style>
    <head>
        <meta charset="utf-8">
        <title>DAY 06</title>
    </head>
    <body>
        <h1 id="title">如果一直熬夜會對人體有什麼影響?</h1>
        <p id="text">有一位偉大的名人說過,如果一直熬夜會導致人們很晚睡,同時也會導致他身體的老化,這就是那位名人說的話</p>
        <p id="copyright">沒有版權</p>
    </body>
</html>

這樣就能夠調整文字第一行的縮排了
https://ithelp.ithome.com.tw/upload/images/20240920/20169478n7j0iOLd42.png

將以下程式保存為03.html,使用瀏覽器開啟

  • line-height行高
<!DOCTYPE html>
<html>
    <style>
        #title {text-align: center;}
        #text_20px {text-align: justify; text-indent: 6%; line-height: 20px;}
        #text_30px {text-align: justify; text-indent: 6%; line-height: 30px;}
        #copyright {text-align: left;}
    </style>
    <head>
        <meta charset="utf-8">
        <title>DAY 06</title>
    </head>
    <body>
        <h1 id="title">台灣</h1>
        <p id="text_20px">臺灣面積約3.6萬平方公里,在當前全球各島嶼面積排名中位居第38(或39),為板塊碰撞隆起形成的大陸島,是東亞島弧之一部分(由菲律賓板塊潛入歐亞板塊形成)。島上約七成面積之地形為山地與丘陵,平原主要集中於西部沿海,地形海拔變化大,最高點3952公尺。全島被北回歸線貫穿,氣候炎熱,夏季偏長,介於熱帶與亞熱帶地帶之間,北回歸線以北為副熱帶季風氣候、以南為熱帶季風氣候[9][10],自然景觀與生態系資源豐富多元[8]。人口約2300萬人,超過七成集中於西部的五大都會區,其中以行政中心臺北為核心的臺北都會區最大,約700萬人。族群構成以漢族、原住民族為主:原住民族由多個屬於南島民族的部族組成,漢族則依民系及移民年代的不同而分為閩南(河洛)、客家與外省族群,其中閩南裔為臺灣最大族群。</p>
        <p id="text_30px">約三萬年前冰河時期開始有人類遷移至台灣活動,自古為原住民族世居之地[11],原住民族在17世紀中葉以前一直居於主體民族地位;隨著漢族不斷從中國大陸移入與墾殖,漢族遂取代原住民族成為臺灣的最大民族。自有信史記錄以來,臺灣歷史上曾經歷多個原住民聯盟和政權、荷西時期、明鄭時期、清治時期、日治時期等多次政權遞嬗,最近一次為1945年進入戰後時期由中華民國統治。1949年中華民國政府播遷臺灣造成兩岸分治的局面後,臺灣成為中華民國有效統治領土的主要部分[d]。隨著1987年戒嚴時代結束,臺灣逐漸淡化過往戒嚴時代形塑的中國史觀,政治上走向自由化與民主化,以中國國民黨及民主進步黨兩黨為首的政黨政治、統獨議題、以及公民社會的形成,加之以東南亞新住民的定居,產生出多元文化主義[12][13],使得臺灣文化呈現多元並立的面貌。而由此原因再加上一中原則,使得現今「臺灣」成為中華民國的通稱。</p>
        <p id="copyright"><a href='https://zh.wikipedia.org/zh-tw/%E8%87%BA%E7%81%A3'>節錄自維基百科</a></p>
    </body>
</html>

這樣就能夠調整文字的行高了
https://ithelp.ithome.com.tw/upload/images/20240920/201694781FcPRDb8MC.png

將以下程式保存為04.html,使用瀏覽器開啟

  • text-align文字間距
<!DOCTYPE html>
<html>
    <style>
        #title {text-align: center;}
        #text_2px {text-align: justify; text-indent: 6%; letter-spacing: 2px;}
        #text_6px {text-align: justify; text-indent: 6%;letter-spacing: 6px;}
        #copyright {text-align: left;}
    </style>
    <head>
        <meta charset="utf-8">
        <title>DAY 06</title>
    </head>
    <body>
        <h1 id="title">台灣</h1>
        <p id="text_2px">臺灣面積約3.6萬平方公里,在當前全球各島嶼面積排名中位居第38(或39),為板塊碰撞隆起形成的大陸島,是東亞島弧之一部分(由菲律賓板塊潛入歐亞板塊形成)。島上約七成面積之地形為山地與丘陵,平原主要集中於西部沿海,地形海拔變化大,最高點3952公尺。全島被北回歸線貫穿,氣候炎熱,夏季偏長,介於熱帶與亞熱帶地帶之間,北回歸線以北為副熱帶季風氣候、以南為熱帶季風氣候[9][10],自然景觀與生態系資源豐富多元[8]。人口約2300萬人,超過七成集中於西部的五大都會區,其中以行政中心臺北為核心的臺北都會區最大,約700萬人。族群構成以漢族、原住民族為主:原住民族由多個屬於南島民族的部族組成,漢族則依民系及移民年代的不同而分為閩南(河洛)、客家與外省族群,其中閩南裔為臺灣最大族群。</p>
        <p id="text_6px">約三萬年前冰河時期開始有人類遷移至台灣活動,自古為原住民族世居之地[11],原住民族在17世紀中葉以前一直居於主體民族地位;隨著漢族不斷從中國大陸移入與墾殖,漢族遂取代原住民族成為臺灣的最大民族。自有信史記錄以來,臺灣歷史上曾經歷多個原住民聯盟和政權、荷西時期、明鄭時期、清治時期、日治時期等多次政權遞嬗,最近一次為1945年進入戰後時期由中華民國統治。1949年中華民國政府播遷臺灣造成兩岸分治的局面後,臺灣成為中華民國有效統治領土的主要部分[d]。隨著1987年戒嚴時代結束,臺灣逐漸淡化過往戒嚴時代形塑的中國史觀,政治上走向自由化與民主化,以中國國民黨及民主進步黨兩黨為首的政黨政治、統獨議題、以及公民社會的形成,加之以東南亞新住民的定居,產生出多元文化主義[12][13],使得臺灣文化呈現多元並立的面貌。而由此原因再加上一中原則,使得現今「臺灣」成為中華民國的通稱。</p>
        <p id="copyright"><a href='https://zh.wikipedia.org/zh-tw/%E8%87%BA%E7%81%A3'>節錄自維基百科</a></p>
    </body>
</html>

這樣就能夠調整文字的間距了
https://ithelp.ithome.com.tw/upload/images/20240920/20169478OgfFPAebzm.png

將以下程式保存為05.html,使用瀏覽器開啟

  • text-shadow文字陰影
<!DOCTYPE html>
<html>
    <style>
        #title {text-align: center;}
        #text_2px {text-align: justify; text-indent: 6%; letter-spacing: 2px; text-shadow: 5px 5px 5px gray;}
        #text_6px {text-align: justify; text-indent: 6%;letter-spacing: 6px;}
        #copyright {text-align: left;}
    </style>
    <head>
        <meta charset="utf-8">
        <title>DAY 06</title>
    </head>
    <body>
        <h1 id="title">台灣</h1>
        <p id="text_2px">臺灣面積約3.6萬平方公里,在當前全球各島嶼面積排名中位居第38(或39),為板塊碰撞隆起形成的大陸島,是東亞島弧之一部分(由菲律賓板塊潛入歐亞板塊形成)。島上約七成面積之地形為山地與丘陵,平原主要集中於西部沿海,地形海拔變化大,最高點3952公尺。全島被北回歸線貫穿,氣候炎熱,夏季偏長,介於熱帶與亞熱帶地帶之間,北回歸線以北為副熱帶季風氣候、以南為熱帶季風氣候[9][10],自然景觀與生態系資源豐富多元[8]。人口約2300萬人,超過七成集中於西部的五大都會區,其中以行政中心臺北為核心的臺北都會區最大,約700萬人。族群構成以漢族、原住民族為主:原住民族由多個屬於南島民族的部族組成,漢族則依民系及移民年代的不同而分為閩南(河洛)、客家與外省族群,其中閩南裔為臺灣最大族群。</p>
        <p id="text_6px">約三萬年前冰河時期開始有人類遷移至台灣活動,自古為原住民族世居之地[11],原住民族在17世紀中葉以前一直居於主體民族地位;隨著漢族不斷從中國大陸移入與墾殖,漢族遂取代原住民族成為臺灣的最大民族。自有信史記錄以來,臺灣歷史上曾經歷多個原住民聯盟和政權、荷西時期、明鄭時期、清治時期、日治時期等多次政權遞嬗,最近一次為1945年進入戰後時期由中華民國統治。1949年中華民國政府播遷臺灣造成兩岸分治的局面後,臺灣成為中華民國有效統治領土的主要部分[d]。隨著1987年戒嚴時代結束,臺灣逐漸淡化過往戒嚴時代形塑的中國史觀,政治上走向自由化與民主化,以中國國民黨及民主進步黨兩黨為首的政黨政治、統獨議題、以及公民社會的形成,加之以東南亞新住民的定居,產生出多元文化主義[12][13],使得臺灣文化呈現多元並立的面貌。而由此原因再加上一中原則,使得現今「臺灣」成為中華民國的通稱。</p>
        <p id="copyright"><a href='https://zh.wikipedia.org/zh-tw/%E8%87%BA%E7%81%A3'>節錄自維基百科</a></p>
    </body>
</html>

這樣就能夠讓文字有陰影了
https://ithelp.ithome.com.tw/upload/images/20240920/20169478vkmWKJzVk2.png


上一篇
Day5 - CSS基礎(一)
下一篇
Day7 - CSS基礎(三)
系列文
Django - 製作網頁一點通12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言